{extend name="public/public"} {block name='css'}
<style>
  .layui-laypage-color .layui-laypage-curr .layui-laypage-em {
    background: var(--main-color);
  }
  .c1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
  }
  .c2 {
    margin-bottom: 20px;
  }
  .c2 a {
    color: #666;
  }
  .c2 span {
    display: inline-block;
    margin: 0 10px;
  }
  .c3 {
    align-items: flex-start;
  }
  .c4 {
    width: 230px;
  }
  .c5 {
    margin-left: 20px;
    flex: 1;
  }
  .c5 .left {
    width: 230px;
    height: 140px;
    margin-right: 20px;
  }
  .c5 .left img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .c5 .right {
    flex: 1;
  }
  .c5 .right .p1 {
    color: #666;
  }
  .c6 {
    background: var(--main-color);
    color: #fff;
    padding: 20px 25px;
    font-size: 18px;
    justify-content: space-between;
  }
  .c6 .iconfont {
    display: none;
  }
  .c7 {
    border: 1px solid var(--main-color);
  }
  .c8 {
    border-bottom: 1px solid var(--main-color);
    position: relative;
  }
  .c8:last-child {
    border: 0;
  }
  .c8 a {
    padding: 15px 25px;
    color: #555;
  }
  .c8:hover span {
    opacity: 1;
  }
  .c8 .flex {
    justify-content: space-between;
  }
  .c8 .iconfont {
    transition: 0.1s;
    display: none;
  }
  .c8.active .iconfont {
    display: block;
  }
  .c8:hover .iconfont {
    display: block;
  }
  .c8.active a {
    color: #000;
    background: #f9f9f9;
  }
  .c8.active span {
    opacity: 1;
  }
  .c8 span {
    transition: 0.3s;
    opacity: 0;
    display: block;
    width: 4px;
    background: var(--main-color);
    position: absolute;
    left: 4px;
    height: 20px;
    bottom: 50%;
    margin-bottom: -10px;
  }
  .c12 {
    margin-top: 30px;
  }
  .c12 #page {
    text-align: right;
  }
  .c13 {
    margin: 15px 0 0;
    color: #999;
  }

  .single-faq {
    border: 1px solid #cad4de;
    padding: 35px;
    margin-bottom: 30px;
    border-radius: 5px;
    color: #7d91aa;
    font-size: 14px;
    font-weight: 300;
  }
  .single-faq h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  .single-faq h2 span {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
  }
  @media only screen and (max-width: 991px) {
    .single-faq h2 span {
      font-size: 18px;
      line-height: 30px;
      height: 30px;
      width: 30px;
      margin-right: 15px;
    }
  }

  @media screen and (max-width: 1380px) {
    .c4 {
      width: 200px;
    }
  }
  @media screen and (max-width: 960px) {
    .c1 {
      padding: 20px;
    }
    .c3 {
      display: block;
    }
    .c4 {
      width: 100%;
    }
    .c5 {
      margin-left: 0;
      margin-top: 20px;
    }
    .c6 .iconfont {
      display: block;
    }
    .c7 {
      display: none;
    }
  }
  @media screen and (max-width: 860px) {
    .single-faq {
      padding: 10px;
    }
    .c5 a {
      display: block;
    }
    .c5 .left {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
      margin-right: 0;
    }
    .c9 {
      width: 48%;
    }
  }

  @media screen and (max-width: 500px) {
    .c12 #page {
      text-align: center;
    }
  }
</style>
{/block} {block name="content"}
<div class="c1">
  <div class="c2 flex">
    <a href="{:url('index')}">首页</a><span>/</span>
    <div>新闻中心</div>
  </div>
  <div class="c3 flex">
    <div class="c4">
      <div class="c6 flex">新闻中心<i class="iconfont">&#xe75f;</i></div>
      <div class="c7">
        <div class="c8 {if $type==0}active{/if}">
          <span></span>
          <a href="{:url('news',array('type_id'=>0))}" class="flex"
            >全部 <i class="iconfont">&#xe76e;</i></a
          >
        </div>
        {volist name="$typeData" id="v"}
        <div class="c8 {if $type==$v['id']}active{/if}">
          <span></span>
          <a href="{:url('news',array('type_id'=>$v['id']))}" class="flex"
            >{$v['name']} <i class="iconfont">&#xe76e;</i></a
          >
        </div>
        {/volist}
      </div>
    </div>
    <div class="c5 cle">
      {volist name="newsData" id="vo"}
      <div class="single-faq">
        <a
          href="{:url('news_details',array('id'=>$vo['id'],'type_id'=>$type))}"
          class="flex"
        >
          <div class="left">
            {empty name="$vo['cover']" }
            <img src="/static/web/img/2023042901news.jpg" alt="" />
            {else/}
            <img src="/uploads/{$vo['cover']}" alt="" />
            {/empty}
          </div>
          <div class="right">
            <h2>{$vo['title']}</h2>
            <p class="p1">{$vo['abstract']}</p>
            <p class="c13">发布时间：{$vo['create_time']|date='Y-m-d H:i'}</p>
          </div>
        </a>
      </div>
      {/volist}
    </div>
  </div>
  <div class="c12">
    <div id="page"></div>
  </div>
</div>
{/block} {block name='js'}
<script>
  $(function () {
    $(".nav-active-2").addClass("current-menu-item");
  });

  layui.use("laypage", function () {
    var laypage = layui.laypage;
    laypage.render({
      elem: "page",
      theme: "color",
      limit: Number("{$limit}"),
      curr: Number("{$page}"), //当前页
      count: "{$count}",
      jump: function (obj, first) {
        var curr = obj.curr; //当前页
        if (!first) {
          var str = "{:url('news',array('page'=>'anan','type'=>$type))}"; //先将变量以字符串的形式带入U函数中
          window.location.href = str.replace("anan", curr); //将代替变量的字符串用真实变量替换掉，OK搞定！
        }
      },
    });
  });

  $(".c6").click(function () {
    $(".c7").slideToggle();
  });
</script>
{/block}
